<!-- 代码编辑&上传区 -->
<div class="form-fieldset form-horizontal form-align-left">
  <nz-alert class="alert-bar" nzType="warning" *ngIf="versionName !=='LATEST'"
    nzMessage="当前选择了某个已发布的版本，不能编辑和上传代码，如果想编辑和上传代码请切换到 LATEST 版本。" nzShowIcon></nz-alert>

  <div class="form-group">
    <label class="control-label col-em-7">代码上传方式</label>
    <div class="col-em-offset-7">
      <nz-radio-group  [(ngModel)]="uploadType" (ngModelChange)="uploadTypeChange($event)"
        [nzDisabled]="versionName !=='LATEST'">
        <label nz-radio-button *ngFor="let object of uploadTypeList" [nzValue]="object.value">{{object.label}}</label>
      </nz-radio-group>
      <div class="pull-right">
        <in-acl-source [inGroup]="'headerAction'" [inService]="'fcs'" [inResourceType]="'fcs-function'"
          [inActions]="['DownloadCode']" [inIsLast]="true" #headerAction>
          <in-acl-btn [inActions]="headerAction.resActions" inAction="DownloadCode" inLabel="下载版本 {{versionName}} 代码包" > 
        <a href="javascript:void(0);" style="line-height: 32px;" (click)="downloadCode()">
          下载版本 {{versionName}} 代码包
        </a>
          </in-acl-btn>
        </in-acl-source>
      </div>
    </div>
  </div>

  <ng-container [ngSwitch]="uploadType">
    <!-- 本地上传 -->
    <ng-container *ngSwitchCase="'upload'">
      <div class="form-group">
        <label class="control-label col-em-7">文件</label>
        <div class="col-em-offset-7">
          <input *ngIf="fcsInstance?.runtime.indexOf('java8') < 0 " class="file-upload-input"
            [ngStyle]="{'border-color': (isZipFile === false || exceedFileMaxSize ===true) ? '#f04134':'','box-shadow':((isZipFile === false || exceedFileMaxSize ===true) && focusFileInput === true)?'0 0 0 2px rgba(240, 65, 52, 0.2)':''}"
            (focus)="focusFileName()" (blur)="blurFileName()" [placeholder]="inputPlaceholder" readonly="readonly"
            [value]="uploadFileName" nz-input>
          <input *ngIf="fcsInstance?.runtime.indexOf('java8') >= 0 " class="file-upload-input"
            [ngStyle]="{'border-color': ((isZipFile === false && isJarFile === false) || exceedFileMaxSize ===true) ? '#f04134':'','box-shadow':(((isZipFile === false && isJarFile === false ) || exceedFileMaxSize ===true) && focusFileInput === true)?'0 0 0 2px rgba(240, 65, 52, 0.2)':''}"
            (focus)="focusFileName()" (blur)="blurFileName()" [placeholder]="inputPlaceholder" readonly="readonly"
            [value]="uploadFileName" nz-input>
          <button class="file-upload-button" [nzType]="'primary'" (click)="fileInput.click()" nz-button
            [disabled]="versionName!='LATEST'">选择</button>
          <span class="file-upload-span">
            <input type="file" #fileInput accept="application/zip" (change)="onUploadFileChange($event)">
          </span>
          <nz-form-explain style="min-height: 0;margin-top: 5px;" *ngIf="fcsInstance?.runtime.indexOf('java8') < 0"
            [ngStyle]="{ 'color' : (isZipFile === false || exceedFileMaxSize ===true) ? '#f04134':'#bababa'}">
            上传文件格式为 zip ，大小限制为 {{fileMaxSize}}MB，大于 {{fileMaxSize}}MB 文件请通过对象存储上传</nz-form-explain>
          <nz-form-explain style="min-height: 0;margin-top: 5px;" *ngIf="fcsInstance?.runtime.indexOf('java8') >= 0"
            [ngStyle]="{ 'color' : ((isZipFile === false && isJarFile === false ) || exceedFileMaxSize ===true) ? '#f04134':'#bababa'}">
            上传文件格式为 zip/jar，大小限制为 {{fileMaxSize}}MB，大于 {{fileMaxSize}}MB 文件请通过对象存储上传</nz-form-explain>
        </div>
      </div>
    </ng-container>
    <!-- 从 OSS 上传 -->
    <ng-container *ngSwitchCase="'oss'">
      <div class="form-group">
        <label class="control-label col-em-7">OSS Bucket</label>
        <div class="col-em-offset-7">
          <nz-select [(ngModel)]="ossBucket"
            [ngStyle]="{'border':ossBucket===''?'1px solid #f04134':'','width':'400px'}" [nzShowSearch]="true"
            nzShowSearch nzPlaceHolder="请选择OSS Bucket" nzNotFoundContent="没有可用的 Bucket" [nzAutoClearSearchValue]="false"
            [nzLoading]="isLoadingBucket" (ngModelChange)="bucketChange()">
            <nz-option *ngFor="let object of ossBucketList" [nzLabel]="object.bucketName" [nzValue]="object.bucketName">
            </nz-option>
          </nz-select>
        </div>
      </div>
      <div class="form-group">
        <label class="control-label col-em-7">OSS 对象文件</label>
        <div class="col-em-offset-7">
          <input
            [ngStyle]="{'border':ossFileValidator===false?'1px solid #f04134':'','box-shadow':ossFileValidator===false?'0 0 0 2px rgba(240, 65, 52, 0.2)':'','max-width':'400px'}"
            placeholder="请输入OSS对象文件路径，以/开头，以 .zip 结尾" [ngModel]="ossFile" (ngModelChange)="ossFileChange($event)"
            nz-input />
          <nz-form-explain style="min-height: 0;margin-top: 5px;"
            [ngStyle]="{color:ossFileValidator?'#bababa':'#f04134'}" class="help-text">
            oss对象文件是以 Bucket 根目录（"/"）开始，以 zip 代码文件结尾的完整路径，例如:"/text/demo.zip"</nz-form-explain>
        </div>
      </div>
    </ng-container>
    <!-- 在线编辑 -->
    <ng-container *ngSwitchCase="'online'">
      <nz-spin [nzSpinning]="isCodeLoading" nzTip="在线编辑器加载中">
        <div style="width: 100%;height: 6rem;border: #ececec solid 1px;margin-bottom: 15px;">
          <iframe [src]="ideUrl" frameborder="0" style="width: 100%;height: 100%;" #codeEditor></iframe>
          <div *ngIf="isCodeLoading"
            style="position: absolute;width: 100%;height: 100%;background-color: #fff;top: 0;left: 0;transition: 0.3s all;">
          </div>
        </div>
      </nz-spin>
    </ng-container>
    <ng-container *ngSwitchDefault></ng-container>
  </ng-container>

  <div class="form-group" style="margin-bottom: 0;">
    <label class="control-label col-em-7"></label>
    <div class="col-em-offset-7 btn-line">
      <in-acl-source [inGroup]="'headerAction1'" [inService]="'fcs'" [inResourceType]="'fcs-function'"
          [inActions]="['InvokeFunction','UploadCode']" [inIsLast]="true" #headerAction1>
      <in-acl-btn [inActions]="headerAction1.resActions" inAction="UploadCode" inLabel="上传" > 
        <button nz-button nzType="primary" (click)="updateCode()" [nzLoading]="isLoadingSaveCode"
          [disabled]="!isEnabledSaveCode || versionName!='LATEST'">
          <span>上传</span>
        </button>
      </in-acl-btn>
      
      <in-acl-btn [inActions]="headerAction1.resActions" inAction="InvokeFunction" inLabel="执行" > 
        <button nz-button nzType="default" (click)="invokeFunction()" [nzLoading]="isLoadingInvoke"
          [disabled]="fcsInstance?.status !=='success'">
          <span>执行</span>
        </button>
      </in-acl-btn>
      </in-acl-source>
    </div>
  </div>

</div>

<!-- 代码执行区 -->
<nz-spin [nzSpinning]="isLoadingInvoke" nzTip="执行中...">
  <div class="tab-page clearfix">
    <div class="covered-form pl16" [class.hide]="cover">
      <div class="form-fieldset form-horizontal form-align-left" style="border: none;">
        <fieldset>
          <legend>触发事件（event）</legend>
          <div nz-col nzSpan="24" class="gutter-row flex-span">
            <fieldset>
              <ngx-monaco-editor [options]="eventEditorOptions" [(ngModel)]="invokeEvent" class="my-code-editor">
              </ngx-monaco-editor>
            </fieldset>
          </div>
        </fieldset>
      </div>
    </div>
    <div class="covering-result pl16" [class.cover]="cover">
      <button *ngIf="cover" nz-button class="cover-icon" [class.after-cover]="cover" (click)="cover=!cover" nz-popover
        nzContent="触发事件（event）" nzPlacement="right">
        <i class="anticon anticon-caret-right"></i>
      </button>
      <button *ngIf="!cover" nz-button class="cover-icon" [class.after-cover]="cover" (click)="cover=!cover">
        <i class="anticon anticon-caret-left"></i>
      </button>

      <div class="form-fieldset form-horizontal form-align-left" style="border: none;padding-right: 0.12rem;">
        <fieldset>
          <legend>执行摘要</legend>
          <div nz-col nzSpan="24" class="gutter-row flex-span">
            <div class="form-static" style="margin-bottom: 0;">
              <div class="form-group">
                <div nz-col nzSpan="24" class="gutter-row flex-span">
                  <div class="form-static" style="margin-bottom: 0;">
                    <div class="form-group">
                      <label class="control-label col-em-7">RequestID：</label>
                      <div class="col-em-offset-7">
                        <p class="form-control-static">{{invokeData?.requestId || '--'}}</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="form-group">
                <div nz-col nzSpan="24" class="gutter-row flex-span">
                  <div class="form-static" style="margin-bottom: 0;">
                    <div class="form-group">
                      <label class="control-label col-em-7">代码校验： </label>
                      <div class="col-em-offset-7">
                        <p class="form-control-static">{{invokeData?.checksum || '--'}}</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="form-group">
                <div nz-col nzSpan="8" class="gutter-row flex-span">
                  <div class="form-static" style="margin-bottom: 0;">
                    <div class="form-group">
                      <label class="control-label col-em-7">执行状态： </label>
                      <div class="col-em-offset-7">
                        <p class="form-control-static invoke-success"
                          *ngIf="invokeData && invokeData.returnCode == 200">
                          成功</p>
                        <p class="form-control-static invoke-failed"
                          *ngIf="invokeData && invokeData.returnCode != 200 && invokeData.returnCode != 0">
                          失败
                        </p>
                        <p class="form-control-static"
                          *ngIf="(invokeData && invokeData.returnCode == 0) || invokeData === undefined">--</p>
                      </div>
                    </div>
                  </div>
                </div>
                <div nz-col nzSpan="8" class="gutter-row flex-span nzSpan-padding">
                  <div class="form-static" style="margin-bottom: 0;">
                    <div class="form-group">
                      <label class="control-label col-em-7">执行时间： </label>
                      <div class="col-em-offset-7">
                        <p class="form-control-static">
                          {{invokeData?.runtimeDuration ? invokeData?.runtimeDuration + 'ms': '--'}}
                        </p>
                      </div>
                    </div>
                  </div>
                </div>
                <div nz-col nzSpan="8" class="gutter-row flex-span nzSpan-padding">
                  <div class="form-static" style="margin-bottom: 0;">
                    <div class="form-group">
                      <label class="control-label col-em-7">运行内存： </label>
                      <div class="col-em-offset-7">
                        <p class="form-control-static">
                          {{invokeData?.memoryUsage ? invokeData?.memoryUsage + 'MB' : '--'}}</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </fieldset>

        <fieldset>
          <legend>返回结果</legend>
          <pre class="return-msg-height"><code>{{invokeData?.returnMsg || '--'}}</code></pre>
        </fieldset>

        <fieldset>
          <legend>执行日志</legend>
          <pre class="invoke-log"><code>{{invokeData?.log || '--'}}</code></pre>
        </fieldset>

      </div>
    </div>
  </div>
</nz-spin>